<template>
  <div id="my">
      <h1>我的<van-icon name="bars" class="topright"/></h1>
      <div class="linear">
          <van-image
            round
            width="4rem"
            height="4rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
            class="position"
          />
      </div>
      <div class="dingdan">
            <h3>--我的订单--</h3>
            <van-row type="flex" justify="space-around" class="distance">
              <van-col span="8" class="kk" @click="tomovie"><van-icon name="video-o" size="3rem"/><h3>电影</h3></van-col>
              <van-col span="8" class="mm" ><van-icon name="bag-o" size="3rem"/><h3>商城</h3></van-col>
            </van-row>
      </div>
      <div class="other">
        <van-cell title="优惠券" is-link @click="toast"/><br>
        <van-cell title="折扣卡" is-link @click="toast"/>
      </div>
  </div>
</template>

<script>
export default {
    name:'myview',
    data(){
        return {}
    },
    methods:{
      toast(){
        Toast.fail('没有了喔');
      },
      tomovie(){
        this.$router.push({name:'movie'})
      }
    }
}
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
#my{
  width: 100%;
  height: 100vh;
  background-color: rgba(212, 202, 202, 0.4);
}
#my h1{
    width: 100%;
    text-align: center;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    background-color: rgb(235, 56, 56);
    color: white;
    font-weight: 500;
}
#my .topright{
    position: absolute;
    font-size: 30px;
    right: 0;
    top: 12px;
}
#my .linear{
  width: 100%;
  height: 120px;
  background: linear-gradient(to right, #ff6034, #ee0a24);
}
#my .position{
  position: absolute;
  top: 80px;
  left: 45%;
}
#my .dingdan{
  width: 100%;
  height: 200px;
  background-color: white;
  text-align: center;
  margin: 15px 0;
}
.distance{
  margin-top:40px;
}
.kk{
    position: relative;
    width: 70px;
    height: 50px;
    background-color: rgba(247, 136, 9, 0.5);
    border-radius:15px;
}
.mm{
    position: relative;
    width: 70px;
    height: 50px;
    background-color: rgba(48, 181, 71, 0.463);
    border-radius:15px;
}
#my .other{
  width: 100%;
  height: 100px;
  background-color: white;
  margin: 15px 0;
}
</style>